<template>
  <div>
    <el-tabs v-model="activeIndex">
      <el-tab-pane
        v-for="(item, index) in Circle"
        :key="index"
        :label="item.name"
        :name="index.toString()"
      >
      </el-tab-pane>
    </el-tabs>
    <!-- 闭环率 -->
    <div class="select" v-if="activeIndex === '0'">
      <!-- 开始日期 -->
      <el-date-picker
        v-if="activeIndex === '0'"
        v-model="beginTime"
        type="datetime"
        placeholder="请选择开始日期"
      >
      </el-date-picker>
      <!-- 结束日期 -->
      <el-date-picker
        v-if="activeIndex === '0'"
        v-model="endTime"
        type="datetime"
        placeholder="请选择结束日期"
        style="margin: 0 20px"
      >
      </el-date-picker>
      <!-- 区县 -->
      <el-select placeholder="县(区)" v-model="area" style="margin-right: 20px">
        <el-option
          v-for="item in areaOptions"
          :key="item.value"
          :label="item.value"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <button @click="getHms(area, formattedBeginTime, formattedEndTime)">
        查询
      </button>
    </div>
    <!-- 表格 -->
    <div class="content" v-if="activeIndex === '0'">
      <div class="data">
        <el-table
          stripe
          ref="filterTable"
          :data="tableData"
          style="width: 100%"
          height="100%"
          :header-cell-style="headerCellStyle"
          :cell-style="cellStyle"
          :row-style="rowStyle"
        >
          <el-table-column prop="product_time" label="时间" align="center">
          </el-table-column>
          <el-table-column prop="product_area" label="地区" align="center">
          </el-table-column>
          <el-table-column prop="itt30" label="半小时回执" align="center">
          </el-table-column>
          <el-table-column prop="itt120" label="2小时回执" align="center">
          </el-table-column>
          <el-table-column prop="confirmed" label="已确认数量" align="center">
          </el-table-column>
          <el-table-column prop="total" label="回执总数" align="center">
          </el-table-column>
          <el-table-column prop="now" label="截至当前回执数" align="center">
          </el-table-column>
          <template slot="empty"><div>当前时间段内暂无数据</div></template>
        </el-table>
      </div>
    </div>
    <!-- 闭环查询 -->
    <div v-if="activeIndex === '1'">
      <div class="select" v-if="!clickDetail">
        <!-- 开始日期 -->
        <el-date-picker
          v-model="beginTime"
          type="datetime"
          placeholder="请选择开始日期"
        >
        </el-date-picker>
        <!-- 结束日期 -->
        <el-date-picker
          v-model="endTime"
          type="datetime"
          placeholder="请选择结束日期"
          style="margin: 0 20px"
        >
        </el-date-picker>
        <!-- 区县 -->
        <el-select
          placeholder="县(区)"
          v-model="area"
          style="margin-right: 20px"
        >
          <el-option
            v-for="item in areaOptions"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <button @click="search(formattedBeginTime, formattedEndTime)">
          查询
        </button>
      </div>
      <div class="content" v-if="activeIndex === '1'">
        <div class="data">
          <el-table
            v-if="!clickDetail"
            stripe
            ref="filterTable"
            :data="tableData2"
            style="width: 100%"
            height="100%"
            :header-cell-style="headerCellStyle"
            :cell-style="cellStyle"
            :row-style="rowStyle"
          >
            <el-table-column prop="itt" label="入库时间" align="center">
            </el-table-column>
            <el-table-column prop="mark" label="正式" align="center">
            </el-table-column>
            <el-table-column prop="productId" label="产品ID" align="center">
            </el-table-column>
            <el-table-column prop="productTime" label="发布时间" align="center">
            </el-table-column>
            <el-table-column prop="productNumber" label="期数" align="center">
            </el-table-column>
            <el-table-column prop="productClass" label="类别" align="center">
            </el-table-column>
            <el-table-column
              prop="productContent"
              label="内容"
              align="center"
              width="300"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="productArea" label="区域" align="center">
            </el-table-column>
            <el-table-column prop="productUnit" label="发布单位" align="center">
            </el-table-column>
            <el-table-column label="详情" align="center"
              ><template slot-scope="scope">
                <el-button
                  @click="
                    getDetail(
                      scope.row.productId,
                      scope.row.productClass,
                      scope.row.productArea
                    )
                  "
                  >点击获取详情</el-button
                >
              </template>
            </el-table-column>
            <template slot="empty"><div>当前时间段内暂无数据</div></template>
          </el-table>
          <!-- 分页 -->
        <el-pagination
         v-if="!clickDetail"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
        >
        </el-pagination>
          <!-- 详情 -->
          <div v-if="clickDetail">
            <el-table
              stripe
              :data="tableData3"
              style="width: 100%"
              height="75vh"
              :header-cell-style="headerCellStyle"
              :cell-style="cellStyle"
              :row-style="rowStyle"
            >
              <el-table-column
                prop="confirmTime"
                label="确认时间"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="confirmType"
                label="确认方式"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="duty" label="职责" align="center">
              </el-table-column>
              <el-table-column prop="name" label="姓名" align="center">
              </el-table-column>
              <el-table-column prop="tel" label="电话" align="center">
              </el-table-column>
              <el-table-column prop="sgroup" label="行业" align="center">
              </el-table-column>
              <el-table-column prop="town" label="区域" align="center">
              </el-table-column>
              <el-table-column prop="village" label="乡镇" align="center">
              </el-table-column>
              <el-table-column prop="unit" label="单位" align="center">
              </el-table-column>
              <el-table-column prop="type" label="类型" align="center">
              </el-table-column>

              <template slot="empty"><div>当前时间段内暂无数据</div></template>
            </el-table>
          </div>
        </div>

        
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      activeIndex: 0,
      tableData: [],
      tableData2: [],
      tableData3: [],
      beginTime: null,
      endTime: null,
      Circle: [{ name: "闭环率统计" }, { name: "闭环查询" }],
      // 地区
      area: "雅安",
      // 地区选择器
      areaOptions: [
        {
          value: "雅安",
        },
        {
          value: "雨城",
        },
        {
          value: "经开",
        },
        {
          value: "名山",
        },
        {
          value: "天全",
        },
        {
          value: "芦山",
        },
        {
          value: "宝兴",
        },
        {
          value: "荥经",
        },
        {
          value: "汉源",
        },
        {
          value: "石棉",
        },
      ],
      currentPage: 1,
      pageSize: 20,
      total: null,
      clickDetail: false,
    };
  },
  computed: {
    formattedBeginTime() {
      return this.beginTime.toISOString().split(".")[0].replace("T", " ");
    },
    formattedEndTime() {
      return this.endTime.toISOString().split(".")[0].replace("T", " ");
    },
  },
  methods: {
    beginDefault() {
      const now = new Date();
      const sevenDaysAgo = new Date(now);
      sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
      sevenDaysAgo.setHours(0, 0, 0, 0);
      return sevenDaysAgo.toISOString().split(".")[0].replace("T", " ");
    },
    // 计算结束时间（今天的23:59:59.999）
    endDefault() {
      const now = new Date();
      const endOfDay = new Date(now);
      endOfDay.setHours(23, 59, 59, 999);
      return endOfDay.toISOString().split(".")[0].replace("T", " ");
    },
    headerCellStyle() {
      return {
        background: "#011A10",
        color: "#fff",
        opacity: 0.8,
      };
    },
    cellStyle() {
      return {
        background: "#00371D",
        color: "#fff",
      };
    },
    rowStyle() {
      return {
        height: "50px",
      };
    },

    getHms(countyName, beginTime, endTime) {
      axios
        .get("https://816i9307t1.vicp.fun/yaqxfw/productInfo/getRateHMS", {
          params: {
            type: "山洪灾害",
            countyName: countyName ? countyName : "雅安",
            beginTime: beginTime ? beginTime : this.beginDefault,
            endTime: endTime ? endTime : this.endDefault,
          },
        })
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data;
        })
        .catch((error) => {
          console.error("请求失败:", error);
        });
    },
    getUrl(fileName) {
      axios
        .get("https://816i9307t1.vicp.fun/yaqxfw/pdf/getUrl", {
          params: {
            fileName: fileName,
          },
        })
        .then((res) => {
          //console.log(res.data.data);
          window.open(res.data.data);
        })
        .catch((error) => {
          console.error("请求失败:", error);
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
        this.search()
    },
    handleCurrentChange(val) {
      this.currentPage = val;
        this.search();
    },
    search(beginTime, endTime) {
      const queryParams = {
        productArea: "雅安",
        productType: "山洪灾害",
        start: beginTime ? beginTime : this.beginDefault,
        end: endTime ? endTime : this.endDefault,
        pageSize: 20,
        pageNum: this.currentPage,
      };
      axios
        .post("https://816i9307t1.vicp.fun/yaqxfw/disaster/ground", null, {
          params: queryParams,
        })
        .then((res) => {
          //console.log(res.data.data);
          this.tableData2 = res.data.data.list;
          this.total = res.data.data.total;
        })
        .catch((error) => {
          console.error("请求失败:", error);
        });
    },
    getDetail(id, type, area) {
      this.clickDetail = true;
      const Params = {
        productId: id,
        type: type,
        county: area,
        pageSize: 999,
      };
      axios
        .post(
          "https://816i9307t1.vicp.fun/yaqxfw/disaster/ground/detail",
          null,
          {
            params: Params,
          }
        )
        .then((res) => {
          //console.log(res);
          this.tableData3 = res.data.data.pageInfo.list;
          this.total = res.data.data.confirmedNum;
        });
    },
  },
  created() {
    this.beginTime = new Date(this.beginDefault());
    this.endTime = new Date(this.endDefault());
  },
  mounted() {
    //this.getHms();
    this.search();
  },
};
</script>
<style lang="scss" scoped>
.right {
  width: 75%;
  height: 95%;

  /*表格 */

  .select {
    width: 100%;
    height: 5%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 20px 0;
    button {
      width: 100px;
      height: 40px;
      background: none;
      border: #47c364 1px solid;
      border-radius: 5px;
      color: #fff;
    }
  }

  .content {
    width: 100%;
    height: 88%;
    display: flex;
    flex-wrap: wrap;

    .data {
      width: 100%;
      height: 69vh;
    }
  }
}
</style>